<!--引入公共的模板-->
{{extend './layout.html'}}
{{block 'content'}}
<div class="container">
    <h3 class="mt-5">发布文章</h3>
    <!--    
        enctype 的三个属性值
        
        1.application/x-www-form-urlencoded 默认值，上传用户名和密码 QueryString name=zhang&age=18
        2.multipart/form-data  上传文件,转换成二进制才能上传
        3.text/plain：上传纯文本  传输，空格转换成+，但不将non-ASCII字符编码为%ASCII HEX. 现在主要应用于发送json数据到服务端
    -->
    <!-- 伪ajax -->
    <form class="mt-5 mb-3" action="/publish" method="post" enctype="multipart/form-data" id="form">        
        <div class="row">
            <!-- 文章缩略图 -->
            <div class="mb-3 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <label for="file" class="form-label" id="thumb"> 缩略图 </label>
                <input type="file" class="form-control" name="thumb" id="file"/>
            </div>
            <!-- 文章类型 -->
            <div class="mb-3 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <label for="sort_id" class="form-label"> 选择类型 </label>
                <select name="sort_id"  class="form-control" id="sort_id">
                    <option value="1">精品</option>
                    <option value="2" selected>免费</option>
                </select>
            </div>
        </div>
        <div class="row">
            <!-- 文章标题 -->
            <div class="mb-3 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <label for="title" class="form-label"> 标题 * </label>
                <input type="text" class="form-control"  placeholder="标题" id="title" name="title"/>
            </div>
            <!-- 文章作者 -->
            <div class="mb-3 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <label for="author" class="form-label"> 作者 *  </label>
                <input type="text" class="form-control"  placeholder="作者" id="author" name="author"/>
            </div>
        </div>
        <div class="row">
            <!-- 文章副标题 -->
            <div class="mb-3 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <label for="subhead" class="form-label"> 副标题 *  </label>
                <input type="text" class="form-control"  placeholder="副标题" id="subhead" name="subhead"/>
            </div>  
            <!-- 文章描述 -->
            <div class="mb-3 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <label for="intro" class="form-label"> 描述 *  </label>
                <input type="text" class="form-control"  placeholder="描述" id="intro" name="intro"/>
            </div>
        </div>
        <!-- 文章内容 -->
        <div class="mb-5" style="height:600px">
            <label for="content" class="form-label"> 内容 *  </label>
            <div id="test-editor">
                <textarea style="display:none;" id="content" name="content">### 关于 Editor.md </textarea>
            </div>
        </div>
        <div class="mb-3">
            <input type="submit" class="form-control btn-primary" id="public" value="发布" >
        </div>
    </form>
</div>
<script>
    $(function() {
        var editor = editormd("test-editor", {
            width  : "100%",
            height : "100%",
            path   : "editormd/lib/",
            // saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
        });
        // 把markdown转html,需要通过 editor.getHTML()方法实现    
    });

    // 前端发送数据给后端只能两种方式 1.通过form表单（action，method）发送  2.通过js或jquery的ajax发送
    // 前端做表单验证
    $("#form").on('submit',function(e){
        if ( $("#title").val() !=='' && $("#author").val() !== '' && $("#subhead").val() !== '' && $("#intro").val() !== '' && $("#content").val() !== '' ) {

        }else{
            e.preventDefault();
            alert('表单中的带有“*”的必填！');
        }
    })

    // 缩略图
    const img = new Image();
    $('#file').change(function(){
        // 上传文件验证
        const fileName = this.files[0].name.toLowerCase();
        const fileSize = this.files[0].size;
        const name = fileName.substr(fileName.lastIndexOf('.')+1,fileName.length);
        console.log(name);
        //判断文件类型
        if (!/(gif|jpg|jpeg|png|bmp|webp)$/.test(name) || fileSize >= 1048576 ) {
            // 判断不符合规范的禁止提交
            $("#public").attr('disabled','true');
            alert("图片类型必须是.gif,jpeg,jpg,png,bmp,webp中的一种,且图片大小不能大于1M！");
            return;
        }
        const file = this.files[0];
        const path = window.URL.createObjectURL(file);       
        img.src = path;
        img.width = 120;
        img.height = 80;
        // append 在元素内容后面追加  prepend 在元素内容前面追加  before 在元素前面追加  after 在元素后面追加
        $("#thumb").before(img);
    })




</script>
{{/block}}